import "./index.scss"
import Return2Icon from "@src/assets/return2.svg?react"
import {useNavigate} from "react-router-dom";
import structureChart from "./assets/structureChart.png"

const Introduce = () => {
    const navigate = useNavigate();
    return <div className="introduce">
        <div className="head centered">
            <Return2Icon onClick={() => navigate(-1)}></Return2Icon>
            <h4>关于本站</h4>
            <div></div>
        </div>
        <div className="introduce-main">
            <div className="card">
                <h3 style={{color: "#0a62c7"}}>介绍</h3>
                <p>本站由作者全栈开发。</p>
                <p>2025年5月，我即将开始实习，因此需要扩充作品集以展示自己的技术能力。</p>
                <p>于是我决定开发一个可以一起听歌、聊天的小网站。</p>
                <p>项目于2025年3月13日启动，2025年4月22日正式上线。目前仍在持续完善中，如果你有: 优化建议, 问题反馈, 音乐推荐,
                    交流技术等需求，欢迎与我联系～ 😃</p>
                <p>QQ：1513531680</p>
                <p>gite地址: https://gitee.com/zouyangguang</p>
            </div>
            <div className="card">
                <h3 style={{color: "#c7200a"}}>背景</h3>
                <p>
                    音聊阁，一个音乐与灵魂相遇的地方。在这里，你可以将心爱的歌曲分享给同样热爱音乐的朋友们，让旋律在聊天室中流淌，让情感在交流中碰撞。它是一个轻松的社交空间，让喜欢同一首歌的人汇聚于此，无需刻意寻找，音乐知己自会在此相遇。
                </p>
            </div>
            <div className="card">
                <h3 style={{color: "#5f8c4f"}}>前端</h3>
                <p><span>前端采用</span>:React + Vite + TypeScript 构建基础框架，结合以下技术实现功能：</p>
                <p><span>表单验证</span>：使用 Formik 和 Yup，实现高效且灵活的表单验证逻辑。</p>
                <p><span>实时通信</span>：通过 socket.io-client 与服务器建立连接，实现低延迟的实时数据交互。</p>
                <p><span>路由与动画</span>：使用 react-router-dom 管理路由，并结合 framer-motion 实现流畅的路由切换动画。
                </p>
                <p><span>气泡框定位</span>：在聊天室功能中，使用 @floating-ui/react 智能定位用户消息气泡，确保布局的灵活性与准确性。
                </p>
            </div>
            <div className="card">
                <h3 style={{color: "#ff9900"}}>后端</h3>
                <p><span>后端采用</span>: Node.js + Express + Socket.IO + mysql2 构建基础架构,其中</p>
                <p><span>数据存储</span>：通过 mysql2 连接 MySQL 数据库，实现数据的高效存储与查询。</p>
                <p><span>跨域请求</span>：借助 cors 中间件，精准配置允许特定来源的请求，确保系统安全稳定运行。</p>
                <p><span>邮件服务</span>：利用 nodemailer 实现用户获取验证码功能，为用户注册、登录等环节提供便捷的邮件验证服务。
                </p>
                <p><span>身份认证</span>：用户登录成功后，借助 jsonwebtoken 生成有效期为 1 天的用户
                    token，保障用户信息安全，实现安全可靠的用户认证机制。
                </p>
                <p><span>实时通信</span>：基于 Socket.IO 建立实时通信链接，高效实现群聊、私信、消息离线发送等功能，为用户提供流畅、实时的交互体验
                </p>
            </div>
            <div className="card">
                <h3 style={{color: "#ffadd5"}}>MySql数据库表</h3>
                <ul>
                    <li>
                        <span>chatroom</span>
                        存储聊天室的相关信息，如聊天室的基本信息、当前播放状态等，用于管理聊天室。
                    </li>
                    <li>
                        <span>chatroom_song</span>
                        记录聊天室中播放的歌曲列表，关联聊天室和歌曲，实现聊天室的音乐播放功能。
                    </li>
                    <li>
                        <span>daily_visitor_count</span>
                        统计每天的访客数量，方便分析应用的使用情况和用户活跃度。
                    </li>
                    <li>
                        <span>messages</span>
                        存储用户之间的消息记录，支持群聊和私信功能，记录消息的发送者、接收者、内容和状态等。
                    </li>
                    <li>
                        <span>song</span>
                        存储歌曲信息，包括歌曲名称、作者、时长等，供聊天室播放音乐时使用。
                    </li>
                    <li>
                        <span>user_relationships</span>
                        管理用户之间的关系，如好友关系，支持好友添加、删除等功能。
                    </li>
                    <li>
                        <span>users</span>
                        存储用户的基本信息和登录凭证，如用户名、密码、邮箱等，用于用户注册、登录和管理。
                    </li>
                </ul>
            </div>

            <div className="card">
                <h3 style={{color: "#a66be1"}}>数据库结构图</h3>
                <img width="100%" src={structureChart} alt=""/>
            </div>
        </div>
    </div>
}
export default Introduce;